import React, {PureComponent} from 'react';
import {AppWrapper, SectionWrapper} from "./style";


class App extends PureComponent {
// 构造函数
    constructor(props) {
        // 调用父类的构造函数
        super(props);
        // 初始化state
        this.state = {
            // 标题大小
            titleSize: 80,
            color: "green"
        }
    }


    // 渲染函数
    render() {
        const {titleSize, color} = this.state;
        return (
            <AppWrapper>
                <div className="app">
                    <SectionWrapper size={titleSize} color={color}>
                        <h2 className="title">我是标题</h2>
                        <p className="content">我是内容</p>
                        <button onClick={e => this.setState({
                            color: "yellow"
                        })}>改变颜色
                        </button>
                        <button onClick={e => this.setState({
                            titleSize: 30
                        })}>设置字体大小
                        </button>
                    </SectionWrapper>
                    <div className="footer">foot</div>
                </div>
            </AppWrapper>

        );
    }
}

export default App;

